<!-- @Author: Yu_Bo -->
<template>
	<view class="scaninfo">
		<!-- 书 -->
		<view class="placeorder_list">
			<view class="list" v-for="(item,index) in list" :key="index">
				<view class="img">
					<image :src="item.image" mode="aspectFill"></image>
				</view>
				<view class="info">
					<view class="info_top">
						<view class="title line_one">
							{{item.goods_name}}
						</view>
						<view class="txt line_one">
							{{item.author}}/{{item.press}}
						</view>
					</view>
					<view class="money">
						<view class="left">
							<text class="icon">￥</text>
							<text class="num">{{item.recovery_price}}</text>
							<text class="zhe color2">回收价</text>
						</view>
						<view class="right">
							<view class="btn" @click="numBtn(1, index)">
								<image src="@/static/images/img/jian.png" mode=""></image>
							</view>
							<view class="num">
								{{item.num}}
							</view>
							<view class="btn" @click="numBtn(2, index)">
								<image src="@/static/images/img/jia.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--  -->
		<view :style="[heightStyle]"></view>
		<!--  -->
		<view class="main_btn" :style="[botStyle]">
			<view class="btn_left" @click="nextBtn">
				直接下单
			</view>
			<view class="btn_right color_right page_button" @click="scanBtn">
				继续扫码
			</view>
		</view>
		<!-- 底部按钮 -->
		<c-footer>
			<view class="book_footer">
				<view class="left">
					<text class="num">共{{totalNum}}件</text>
					<text>合计：</text>
					￥{{totalMoney}}
				</view>
				<view class="right">
					<view class="btn_txt color_right page_button" @click="submitBtn">
						提交订单
					</view>
				</view>
			</view>
		</c-footer>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return{
				bottomHeight: 0,
				// 
				list: [],
			}
		},
		computed: {
			heightStyle() {
				return {
					height: this.bottomHeight ? '260rpx' : '220rpx'
				}
			},
			botStyle() {
				return {
					bottom: this.bottomHeight ? '170rpx' : '130rpx'
				}
			},
			// 总件数
			totalNum() {
				var num = 0
				if(this.list.length) {
					this.list.forEach((item) => {
						num = num + item.num
					})
				}
				return num
			},
			totalMoney() {
				var money = "0.00"
				if(this.list.length) {
					this.list.forEach((item) => {
						money = (money*100 + item.recovery_price*100*item.num)/100
					})
				}
				return money
			},
		},
		onLoad(opt) {
			var that = this
			var obj = JSON.parse(decodeURIComponent(opt.info))
			obj.num = 1
			that.list.push(obj)
			console.log(that.list)
			uni.getSystemInfo({
				success: function(res) {
					that.bottomHeight = res.safeAreaInsets.bottom
				}
			});
		},
		onShow() {},
		methods: {
			// 加减
			numBtn(type, index) {
				if(type == 1) {
					if(this.list[index].num == 1) {
						return
					} else {
						this.list[index].num = this.list[index].num-1
					}
				}
				if(type == 2) {
					this.list[index].num = this.list[index].num+1
				}
				this.$forceUpdate()
			},
			// 直接下单
			nextBtn() {
				this.$navToLogin("/pagesSell/placeorder/index?type=1")
			},
			// 提交订单
			submitBtn() {
				var goods = this.list.map((item) => { 
					var obj = {
						goods_id: item.goods_id,
						num: item.num
					}
					return obj
				})
				console.log(goods)
				this.$navToLogin("/pagesSell/placeorder/index?type=2"+"&totalNum="+this.totalNum+"&totalMoney="+this.totalMoney+"&goods="+encodeURIComponent(JSON.stringify(goods)))
			},
			// 扫码下单
			scanBtn() {
				var that = this
				uni.scanCode({
					scanType: ['barCode'],
					success: function (res) {
						console.log(res)
						console.log('条码类型：' + res.scanType)
						console.log('条码内容：' + res.result)
						if(res.result) {
							that.getInfo(res.result)
						} else {
							that.$tips.showToast("未识别到条码内容")
						}
					}
				});
			},
			getInfo(val) {
				var that = this
				var params = {
					isbn: val,
				}
				that.$httpApi.checkPrice(params).then((res) => {
					if (res.code == 1) {
						var obj = res.data
						var index = that.list.findIndex((item)=>item.goods_id == obj.goods_id)
						if(index == -1) {
							obj.num = 1
							that.list.push(obj)
						} else {
							that.list[index].num = that.list[index].num+1
						}
						that.$forceUpdate()
					}
				})
			},
		},
	}
</script>

<style lang='scss' scoped>
	.scaninfo {
		width: 100%;
		min-height: 100vh;
		padding: 30rpx;
		background: #f6f6f6;
		
		.placeorder_list {
			width: 100%;
			
			.list {
				width: 100%;
				padding: 20rpx;
				margin-bottom: 30rpx;
				background: #fff;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.img {
					width: 180rpx;
					height: 240rpx;
					
					image {
						display: block;
						width: 100%;
						height: 100%;
					}
				}
				
				.info {
					width: calc(100% - 180rpx);
					height: 240rpx;
					padding-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					
					.info_top {
						width: 100%;
						
						.title {
							width: 100%;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 32rpx;
							color: #222222;
						}
						
						.txt {
							width: 100%;
							padding-top: 20rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
						}
					}
					
					.money {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						
						.left {
							display: flex;
							align-items: center;
							
							.icon {
								padding-top: 5rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: bold;
								font-size: 24rpx;
								color: #5A68FF;
							}
							
							.num {
								font-family: PingFang SC, PingFang SC;
								font-weight: bold;
								font-size: 36rpx;
								color: #5A68FF;
							}
							
							.zhe {
								margin-left: 20rpx;
								padding: 2rpx 10rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 22rpx;
								background: #fff;
								border-radius: 10rpx;
							}
							
							.color1 {
								color: #57CB82;
								border: 2rpx solid #57CB82;
							}
							
							.color2 {
								color: #FF9400;
								border: 2rpx solid #FF9400;
							}
						}
						
						.right {
							display: flex;
							justify-content: flex-end;
							
							.btn {
								width: 48rpx;
								height: 48rpx;
								background: #F6F6F6;
								border-radius: 8rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								
								image {
									display: block;
									width: 15rpx;
									height: 15rpx;
								}
							}
							
							.num {
								width: 70rpx;
								height: 48rpx;
								margin: 0 6rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #222222;
								background: #F6F6F6;
								border-radius: 8rpx;
								display: flex;
								align-items: center;
								justify-content: center;
							}
						}
					}
				}
			}
		}
		
		.main_btn {
			position: fixed;
			left: 0;
			width: 100%;
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.btn_left {
				width: 330rpx;
				height: 86rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 36rpx;
				color: #5A68FF;
				background: #E9EBFF;
				border: 2rpx solid #5A68FF;
				border-radius: 45rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.btn_right {
				width: 330rpx;
				height: 90rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 36rpx;
				color: #FFFFFF;
				border-radius: 45rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		
		.book_footer {
			width: 100%;
			height: 100rpx;
			padding: 30rpx 30rpx;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.left {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FF3E3E;
				display: flex;
				align-items: center;
				
				text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #3D444D;
				}
				
				.num {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #999999;
					margin-right: 10rpx;
				}
			}
			
			.right {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				
				.btn_txt {
					width: 200rpx;
					height: 70rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
					border-radius: 45rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
</style>